<template>
	<view class="mysearch">
		<view class="searchdiv">
			<view class="searchdiv1">
				<u-search placeholder="输入功能名称/关键词" v-model="searchKeyWord" :clearabled="true" shape="round" :showAction="false"
					height='66rpx' searchIconSize='46' placeholderColor='#AAAAAA' @search='mysearch' color='#AAAAAA' bgColor=''
					borderColor='#007A69'></u-search>
			</view>
			<view class="searchdiv2" @click="quxiao">
				取消
			</view>
		</view>


		<view class="" v-show="showhide">
			<!-- 历史记录 -->
			<view class="lishijilu">
				<view class="lishijilu1">
					历史记录
				</view>
				<view class="lishijilu2" @click="deleteRecord">
					<u-icon name="trash" color="#333333" size="40"></u-icon>
				</view>
			</view>
			<view class="jilulist">
				<view class="gouqidao" v-for="(item, index) in searchRecords" :key="index" @click="lishitz(item)">
					{{ item }}
				</view>
			</view>
			<!-- 	热门搜索 -->
			<view class="remen">
				热门搜索
			</view>
			<view class="rmss">
				<view class="jingdianlist" v-for="(item, index) in getremenlslist" :key="index" @click="remenclick(item)">
					<view class="jingdianlist1">
						{{ index + 1 }}
					</view>
					<view class="jingdianlist2">
						{{ item.hotName }}
					</view>
					<!-- <view class="jingdianlist3">
					{{item.b}}
				</view> -->
				</view>
			</view>
		</view>

		<!-- 搜索列表	 -->
		<view class="sousuoceng" v-show="!showhide">
			<view class="sousuocentent" v-for="(item, index) in sousuoList" :key="index" @click='tiaozhuan(item)'>
				<view class="sousuocentent1">
					<!-- {{item.name}} -->
					<rich-text :nodes="item.name"></rich-text>
				</view>
				<view class="sousuocentent2">
					<u-icon name="arrow-right" color="#AAAAAA" size="28"></u-icon>
				</view>
			</view>

		</view>


		<!-- 搜索框内容 -->
		<!-- <u-popup :show="showsousuo" mode="center" :round="10" @close="close" @open="open">
			<view class="sousuoceng">
				<view class="sousuocentent" v-for="(item,index) in sousuoList" :key="index" @click='tiaozhuan(item)'>
					<view class="sousuocentent1">
						<rich-text :nodes="item.name"></rich-text>
					</view>
					<view class="sousuocentent2">
						<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
					</view>
				</view>

			</view>
		</u-popup> -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyWord: '',
			//	showsousuo: false,
			sousuoList: [],
			getremenlslist: [],
			showhide: true,
			searchRecords: [] // 搜索记录数组
		};
	},

	onLoad() {
		this.getlslist();
		// 从本地存储中获取搜索记录数组
		this.searchRecords = uni.getStorageSync('searchRecords') || [];
	},
	methods: {
		getlslist() {
			this.$api.get('/api/hotWordConfig/page', {
				limit: 999,
				page: 1,
			}).then(res => {
				if (res.data.code == 0) {
					if (res.data.data.list.length == 0) {
						this.$refs.uToast.show({
							type: 'success',
							title: '',
							message: "暂无热门搜索数据",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
						})

					} else {

						this.getremenlslist = res.data.data.list;
					}

				} else {
					this.$showModal(res.data.msg);
				}
			})
		},
		lishitz(e) {
			this.searchKeyWord = e;
			// console.log('e', e);
			this.$api.get('/api/esSearch/queryIslandIdxPage', {
				limit: 999,
				page: 1,
				keyword: e
			}).then(res => {
				if (res.data.code == 0) {

					if (res.data.data.list.length == 0) {
						this.$refs.uToast.show({
							// type: 'success',
							title: '',
							message: "暂无数据",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
						})

					} else {
						this.searchKeyWord = e.hotName;
						this.showhide = false;
						this.sousuoList = res.data.data.list;
					}

				} else {
					this.$showModal(res.data.msg);
				}
			})

		},
		remenclick(e) {
			// console.log(e.hotName, 'e.hotName');
			this.addSearchRecord(e.hotName);
			this.$api.get('/api/esSearch/queryIslandIdxPage', {
				limit: 999,
				page: 1,
				keyword: e.hotName
			}).then(res => {
				if (res.data.code == 0) {
					if (res.data.data.list.length == 0) {
						this.$refs.uToast.show({
							// type: 'success',
							title: '',
							message: "暂无数据",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
						})

					} else {
						this.searchKeyWord = e.hotName;
						this.showhide = false;
						this.sousuoList = res.data.data.list;
					}
				} else {
					this.$showModal(res.data.msg);
				}
				this.searchRecords = uni.getStorageSync('searchRecords') || [];
			})
		},
		mysearch() {
			if (!this.searchKeyWord) return
			this.addSearchRecord(this.searchKeyWord);
			this.$api.get('/api/esSearch/queryIslandIdxPage', {
				limit: 999,
				page: 1,
				keyword: this.searchKeyWord
			}).then(res => {
				if (res.data.code == 0) {
					if (res.data.data.list.length == 0) {
						this.$refs.uToast.show({
							// type: 'success',
							title: '',
							message: "暂无数据",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
						})

					} else {
						this.showhide = false;
						this.sousuoList = res.data.data.list;
					}

				} else {
					this.$showModal(res.data.msg);
				}
			})
		},
		quxiao() {
			this.searchKeyWord = '';
			this.showhide = true;
			this.searchRecords = uni.getStorageSync('searchRecords') || [];
		},
		tiaozhuan(e) {
			this.showhide = false;
			switch (e.dataType) {
				case 1://小程序按钮跳转页面
					if (e.pageName == '家政服务') {
						uni.reLaunch({
							url: '/pagesService/CouncilSquare/CouncilSquare' + "?name=" + e.pageName
						})
					} else if (e.pageName == '社区互动') {
						uni.reLaunch({
							url: '/pagesService/CouncilSquare/CouncilSquare' + "?name=" + e.pageName
						})
					} else if (e.pageName == '议事广场') {
						uni.reLaunch({
							url: '/pagesService/CouncilSquare/CouncilSquare' + "?name=" + e.pageName
						})
					} else if (e.pageName == '新闻资讯') {
						uni.reLaunch({
							url: '/pagesService/news/news' + "?name=" + e.pageName
						})
					} else if (e.pageName == '求职信息') {
						uni.reLaunch({
							url: '/pagesService/CouncilSquare/CouncilSquare' + "?name=" + e.pageName
						})
					} else if (e.pageName == '志愿服务') {
						uni.reLaunch({
							url: '/pagesService/funActivity/service' + "?name=" + e.pageName
						})
					} else if (e.pageName == '文化休闲') {
						uni.reLaunch({
							url: '/pagesService/CouncilSquare/CouncilSquare' + "?name=" + e.pageName
						})
					} else if (e.pageName == '兴趣课程') {
						uni.reLaunch({
							url: '/pagesService/CouncilSquare/CouncilSquare' + "?name=" + e.pageName
						})
					} else if (e.pageName == '趣味活动') {
						uni.reLaunch({
							url: '/pagesService/funActivity/funActivity' + "?name=" + e.pageName
						})
					} else if (e.pageName == '招聘信息') {
						uni.reLaunch({
							url: '/pagesService/CouncilSquare/CouncilSquare' + "?name=" + e.pageName
						})
					} else if (e.pageName == '海岛航旅') {
						return wx.navigateToMiniProgram({
							shortLink: '#小程序://海岛航旅/3OtLtc8wmESOAou',
							//develop开发版；trial体验版；release正式版
							envVersion: 'release',
							success(res) {
								// 打开成功
								console.log("跳转小程序成功！", res);
							}
						})
					} else {
						uni.reLaunch({
							url: e.pageUrl
						})
					}
					break;
				case 2://景点
					this.$api.get('/api/scenic/selectOneScenic/' + e.id).then(res => {
						uni.removeStorageSync('spid_old');
						uni.removeStorageSync('price_old');
						uni.navigateTo({
							url: "/pagesTrip/scenicSpots/spotDetail?spid=" + e.dataId + '&price=' + (res.data.code === 0 ? res.data.data.startPrice : 0)
						})
					})
					break;
				case 3://酒店
					var today = new Date();
					var formattedToday = this.formatDate(today);
					var tomorrow = new Date();
					tomorrow.setDate(tomorrow.getDate() + 1);
					var formattedTomorrow = this.formatDate(tomorrow);
					let list = [{
						homestayId: e.dataId,
						leaveDate: formattedTomorrow,
						arriveDate: formattedToday
					}]
					uni.navigateTo({
						url: '/pagesTrip/hotel/details/index?list=' + JSON.stringify(list)
					})
					break;
				case 4://餐饮
					uni.navigateTo({
						url: '/pagesTrip/fineFood/details/details?caipid=' + e.dataId
					})
					break;
				case 5://攻略游记
					uni.navigateTo({
						url: '/pages/index/waterfall/details?id=' + e.dataId
					})
					break;
			}
		},
		formatDate(date) {
			var year = date.getFullYear();
			var month = (date.getMonth() + 1).toString().padStart(2, '0');
			var day = date.getDate().toString().padStart(2, '0');
			return year + '-' + month + '-' + day;
		},
		addSearchRecord(keyword) {
			// 从本地存储中获取搜索记录数组
			let records = uni.getStorageSync('searchRecords') || [];
			if (records.find(r => r == keyword)) return
			// 添加新的搜索记录
			records.unshift(keyword);
			// 如果搜索记录超过5个，则删除最后一个记录
			if (records.length > 5) {
				records.pop();
			}
			// 更新本地存储中的搜索记录数组
			uni.setStorageSync('searchRecords', records);
		},
		deleteRecord() {
			this.searchRecords = []
			// 更新本地存储中的搜索记录数组
			uni.setStorageSync('searchRecords', this.searchRecords);
		},

	}

}
</script>

<style lang="scss">
::v-deep .u-search__content__close {
	.u-icon {
		.uicon-close {
			font-size: 28rpx !important;
		}
	}
}

.jingdianlist {

	width: 100%;
	height: 80rpx;
	display: flex;
	align-items: center;

	&:first-child {
		.jingdianlist1 {
			background: #E20000;
			border-radius: 8px;
			color: #fff;
		}
	}

	&:nth-child(2) {
		.jingdianlist1 {
			background: #FF7D01;
			border-radius: 8px;
			color: #fff;
		}
	}

	&:nth-child(3) {
		.jingdianlist1 {
			background: #FBC500;
			border-radius: 8px;
			color: #fff;
		}
	}

	.jingdianlist3 {
		height: 40rpx;
		border-radius: 6px;
		border: 1px solid #CCCCCC;
		padding: 0 10rpx;
		line-height: 40rpx;
	}

	.jingdianlist2 {
		height: 40rpx;
		font-size: 30rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		padding: 0 20rpx;
	}

	.jingdianlist1 {
		width: 40rpx;
		height: 40rpx;
		font-size: 30rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		text-align: center;

	}
}

.rmss {
	display: flex;
	flex-direction: column;
}

.remen {
	width: 100%;
	height: 84rpx;
	font-size: 30rpx;
	font-family: PingFang-SC, PingFang-SC;
	font-weight: bold;
	color: #333333;
	line-height: 84rpx;
}

.gouqidao {
	height: 60rpx;
	border-radius: 30px;
	border: 2px solid #ECECEC;
	font-size: 26rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 60rpx;
	text-align: center;
	padding: 0 20rpx;
	margin-right: 20rpx;
	margin-bottom: 10rpx;
}

.jilulist {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.lishijilu1 {
	height: 84rpx;
	font-size: 30rpx;
	font-family: PingFang-SC, PingFang-SC;
	font-weight: bold;
	color: #333333;
	line-height: 84rpx;
}

.lishijilu {
	width: 100%;
	height: 84rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.searchdiv2 {
	width: 90rpx;
	height: 70rpx;
	font-size: 30rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 70rpx;
	text-align: center;
}

.searchdiv1 {
	width: 600rpx;
	height: 70rpx;
}

.searchdiv {
	width: 100%;
	display: flex;
	height: 70rpx;
	margin-top: 20rpx;
}

.mysearch {
	width: 690rpx;
	margin: 0 auto;
	height: 100%;
}

.sousuocentent2 {
	padding-right: 20rpx;
}

.sousuocentent1 {
	padding-left: 20rpx;

	rich-text {
		font-size: 28rpx !important;
	}
}

.sousuocentent {
	width: 100%;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1rpx solid #e6e6e6;
}

.sousuoceng {
	width: 100%;
	margin-top: 30rpx;
}
</style>